<template>
  <view class="jiaofei-list">
    <view v-for="(item, index) in list" class="jiaofei">
      <view class="item">
        <view class="u-flex u-row-between u-col-center w100 u-m-b-10">
          <view class="title u-flex-1">{{item.house_title}}</view>
          <view class="btn btn1" @click="jiaofeiUpFun(index,item)">更新</view>
          <view class="btn btn2" @click="jiaofeiFun(index,item)">缴费</view>
        </view>
        <view class="lab">热水费：{{item.otherOrders.hot_water_order_data}}吨/{{item.otherOrders.hot_water_order_payment}}元</view>
        <view class="lab ri">冷水费：{{item.otherOrders.cold_water_order_data}}吨/{{item.otherOrders.cold_water_order_payment}}元</view>
        <view class="lab">电费：{{item.otherOrders.electric_order_data}}度/{{item.otherOrders.electric_order_payment}}元</view>
        <!-- <view class="lab ri">总计：{{item.otherOrders.hot_water_order_payment+item.otherOrders.cold_water_order_payment+item.otherOrders.electric_order_payment}}元</view> -->
      </view>
    </view>
    
    <!-- 缴费 -->
    <zb-jiaofei ref="jiaofeiRef" />
  </view>
</template>

<script>
  export default {
    data() {
      return {
        list:[],
        page:1,
        total:0,
        http:'',
      }
    },
    onLoad() {
      uni.showLoading()
      this.getList()
    },
    onShow() {
      uni.showLoading()
      this.http = this.$api.httpUrlApi();
    },
    methods:{
      jiaofeiUpFun(index, item){
        this.$api.getLastFeeApi({ordersNo:item.houseSn}).then(res=>{
          if(res.code != 1) return;
          uni.showToast({
            title:'更新成功',
            icon:'none'
          })
          this.list[index].otherOrders.hot_water_order_data = res.data.hot_water.dsage
          this.list[index].otherOrders.hot_water_order_payment = res.data.hot_water.fee
          this.list[index].otherOrders.cold_water_order_data = res.data.cold_water.dsage
          this.list[index].otherOrders.cold_water_order_payment = res.data.cold_water.fee
          this.list[index].otherOrders.electric_order_data =  res.data.electric.dsage
          this.list[index].otherOrders.electric_order_payment = res.data.electric.fee
        })
      },
      jiaofeiFun(index, item){
        this.$refs.jiaofeiRef.showFun(item)
      },
      // 获取列表
      getList(){
        this.$api.tenancyOrderListApi({page:this.page, payment_status:2}).then(res=>{
          uni.hideLoading()
          if(res.code === 1){
            this.list = this.list.concat(res.data.data);
            this.total = res.data.total;
            if(this.list.length < res.data.total){
              this.page++
            }
          }
        })
      },
    },
    onReachBottom() {
      if(this.page > 1 && this.list.length < this.total){
        this.getList()
      }
    }
  };
</script>

<style lang="scss" scoped>
  page {
    background-color: #f4f6f8;
    overflow: hidden;
  }
  .password{
    height: 168rpx;margin: 30rpx auto;
    width: 690rpx;
    background: #FFFFFF;
    border-radius: 16rpx; padding: 26rpx;
    .icon{width: 46rpx; height: 46rpx; margin-right: 10rpx;}
    .name{font-size: 30rpx; color: #282828;}
    .icon1{width: 28rpx; height: 28rpx; margin: 0 16rpx;}
    .con{
      width: 186rpx;
      height: 60rpx;
      border-radius: 32rpx; font-size: 28rpx;
      border: 1px solid rgba(151,151,151,0.43);
    }
  }
  
  .jiaofei{
    margin: 20rpx auto 0;
    width: 690rpx; border-radius: 16rpx; background-color: #FFFFFF;
    .item{
      padding: 20rpx 30rpx; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
    }
    .w100{width: 100%;}
    .lab{padding: 6rpx 0; font-size: 28rpx; width: 48%;
      &.ri{text-align: right;}
    }
    .title{font-size: 32rpx; color: #000;}
    .btn{border-radius: 8rpx; width: 100rpx; height: 50rpx; @include flex(row,center,center); margin-left: 10rpx; font-size: 26rpx;}
    .btn1{border:1px solid #ededed; background-color: rgba(45, 150, 255,0.2);}
    .btn2{border:1px solid #2D96FF; background-color: #2D96FF; color: #fff;}
  }
  .box {
    margin: 30rpx auto;
    width: 690rpx; flex-wrap: wrap !important;
    @include flex(row,center,space-between);
    .title{font-size: 32rpx;  margin-bottom: 16rpx;}
    .item {
      width: 32%; text-align: center;
      // height: 162rpx;
      padding: 20rpx 0;
      background: #FFFFFF;
      border-radius: 16rpx;
      // @include flex;
      .icon {
        width: 60rpx;
        height: 60rpx; display: block;
        // margin-right: 18rpx; 
        // margin-left: 34rpx;
        margin: 0 auto 10rpx;
      }
      .name {
        flex: 1; margin-bottom: 8rpx;
        font-size: 30rpx;
        color: #282828;
      }
    }
  }
  
</style>